<template>
  <div>
    <el-button size="small" @click="loadDocs" :loading="loading">刷新列表</el-button>
    <docs-list :docs="docs" :loading="loading" />
    <el-pagination
      class="flex m-t-10 align-items-center"
      layout="prev, pager, next"
      hide-on-single-page
      :current-page="curPage"
      :page-count="pageCount"
      @current-change="selectedPage"
    />
  </div>
</template>

<script>
import DocsList from '@/components/spaces/resources-v2/index/search-list';
import { formatResources } from '@/components/spaces/resources-v2/format';

export default {
  name: 'CommunityDocs', // 社区资源区
  components: { DocsList },
  props: ['active'],
  data() {
    return {
      mounted: false,
      docs: [],
      loading: false,
      curPage: 1,
      pageCount: 1,
    };
  },
  mounted() {
    this.mountedComponent();
  },
  methods: {
    // 加载本组件
    mountedComponent(active = this.active) {
      if (active && !this.mounted) {
        this.mounted = true;
        this.loadDocs();
      }
    },
    // 加载社区资源列表
    loadDocs() {
      this.loading = true;
      this.$api.communities.docs({
        communityId: this.$route.params.communityId,
        page: this.curPage,
      }).then((res) => {
        this.docs = formatResources(res.data);
        this.curPage = res.kaminari.current_page;
        this.pageCount = res.kaminari.total_pages;
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 页面跳转！
    selectedPage(page) { this.curPage = page; },
  },
  watch: {
    active() { this.mountedComponent(); },
    curPage() { this.loadDocs(); },
  },
};
</script>

<style></style>
